<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('SIM卡信息')"/>
    <th:block th:include="include :: bootstrap-select-css" />
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-6" style="width: 100%;margin-top: 20px">
            <div class="tabs-container">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">基础信息</a>
                    </li>
                    <li class=""><a id="lszd" data-toggle="tab" href="#tab-2" aria-expanded="false">历史账单</a>
                    </li>

                </ul>
                <div class="tab-content">
                    <div id="tab-1" class="tab-pane active">
                        <div class="panel-body">

                            <div style="width: 70% ; float: left">
                                <div style="height: 35px ;background-color: #f7f7f7;text-align: center;padding-top: 10px">
                                    <strong>SIM卡:基础信息</strong></div>
                                <div  style="width: 50% ;float: left ;margin-top: 20px">
                                    <div>职能部门:</div>
                                    <div>使用单位</div>
                                    <div>管理部门</div>
                                </div>
                                <div  style="width: 50% ;float: right ;margin-top: 20px">
                                    <div>设备编码</div>
                                    <div>卡状态</div>
                                    <div>办卡日期</div>
                                </div>
                            </div>
                            <div style="width: 29%; float: right ">
                                <div style="height: 35px ;background-color: #f7f7f7;text-align: center;padding-top: 10px">
                                    <strong>运营商信息</strong></div>
                                <div style="margin-top: 20px">
                                    <div>职能部门:</div>
                                    <div>职能部门:</div>
                                    <div>职能部门:</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="tab-2" class="tab-pane active">
                        <div class="panel-body" id="tab2h">
                                <table id="bootstrap-table"></table>
                            <div style="width: 100%;margin-top: 300px" >
                                <div class="echarts" id="ech1" style="width: 45% ; float: left"></div>
                                <div class="echarts" id="ech2" style="width: 45% ; float: right"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: echarts-js" />
<th:block th:include="include :: bootstrap-table-export-js" />
<th:block th:include="include :: bootstrap-select-js" />
<script>
    var prefix = ctx + "bill";
    $(function() {
        var options = {
            uniqueId: "sessionId",
            url: prefix + "/list",
            showFooter: false,
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            escape: false,
            pagination:false,
            striped:true,
            // sortName: "lastAccessTime",
            // sortOrder: "desc",
            columns: [
                {
                    title: "序号",
                    formatter: function (value, row, index) {
                        return $.table.serialNumber(index);
                    }
                },
                {
                    field: 'cardNo',
                    title: '年月',
                },
                {
                    field: 'flowLimit',
                    title: '实际使用流量（M）',
                    sortable: true
                },
                {
                    field: 'flow',
                    title: '总消费（元）'
                },
                {
                    field: 'charge',
                    title: '实际费用（元）'
                },
                {
                    field: 'stateName',
                    title: '状态'
                },
                {
                    field: 'stateName',
                    title: '运营商'
                },
                {
                    field: 'stateName',
                    title: '使用单位'
                }]
        };
        $.table.init(options);
    });

    var barChart1 = echarts.init(document.getElementById("ech1"));
    var barChart2 = echarts.init(document.getElementById("ech2"));
    var baroption1 = {
        title : {
            text: '历史消费'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['总消费']
        },
        grid:{
            x:30,
            x2:40,
            y2:35
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : '[[${data1}]]'.substring(1,'[[${data1}]]'.length).slice(0,-1).split(',')
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'总消费',
                type:'bar',
                data:[[${data2}]]
            }
        ]
    };
    var baroption2 = {
        title : {
            text: '历史流量'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['流量']
        },
        grid:{
            x:30,
            x2:40,
            y2:35
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : '[[${data1}]]'.substring(1,'[[${data1}]]'.length).slice(0,-1).split(',')
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'流量',
                type:'bar',
                data:[[${data2}]]
            }
        ]
    };
    barChart1.setOption(baroption1);
    barChart2.setOption(baroption2);
    $(document).ready(function(){
        $("#bootstrap-table").hide();
        $("#ech1").hide();
        $("#ech2").hide();
    });
    $("#lszd").click(function(){
        $("#bootstrap-table").show();
        $("#ech1").show();
        $("#ech2").show();
    });

</script>
</body>

</html>